<template>
    <div class="page page-order-detail has-headbar">
    	<head-bar title="订单详情" :prevRoute="{name: 'user-orders'}" />
			<div class="orderOut">
				<van-loading class="loading" v-if="loading"></van-loading>
				<div class="orderTop">
					<span class="time">{{orderData.createTime | formateDate}}</span>
          <!-- 0 取消 1 预约 200 完成 300 结束 -->
					<template v-if="type === 1">
						<van-button v-if="orderData.status === 1"  class="state" round size="mini">{{orderData.statusStr}}</van-button>
						<van-button v-else class="state no" round disabled size="mini">{{orderData.statusStr}}</van-button>
					</template>
				</div>
				<ul class="orderList">
					<li>
						<label>订单编号</label>
						<span>{{orderData.orderId}}</span>
					</li>
					<li>
						<label>地址</label>
						<span>{{orderData.address}}</span>
					</li>
					<li>
						<label>项目</label>
						<span>{{orderData.name}}</span>
					</li>
					<li v-if="type === 1">
						<label>预定时间</label>
						<span>{{orderData.orderDate}}</span>
					</li>
					<li>
						<label>联系人</label>
						<span>{{orderData.contactsPerson}}</span>
					</li>
					<li>
						<label>联系电话</label>
						<span><a :href="`tel:${orderData.contactsPhone}`">{{orderData.contactsPhone}}</a></span>
					</li>
				</ul>
			</div>
			<!-- <div class="cancle-box">
				<van-button class="submit-btn" type="warning" size="large" @click="submitEvent" :disabled="submitDisabled" :loading="submitLoading">取消预约</van-button>
			</div> -->
    </div>
</template>

<script>
import { API_ORDER_DETAIL } from '@/service/order'
import dayjs from 'dayjs'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  name: 'stadium-order',
  props: ['type', 'orderId'],
  data () {
	  return {
      orderData: {},
      loading: false,
      submitDisabled: false,
      submitLoading: false
	  }
  },
  filters: {
    formateDate (time) {
      return time ? dayjs(dayjs.unix(time)).format('YYYY-M-D HH:mm') : ''
    }
  },
  mounted () {
		this.wechatHideMenu()
	  this.requestData()
  },
  methods: {
	  requestData () {
      // 1体检2培训
      this.loading = true
		  API_ORDER_DETAIL({ physicalExaminationOrderId: this.orderId, type: this.type }).then(resData => {
			  this.orderData = resData.info
		  }).finally(() => {
        this.loading = false
      })
    },
    submitEvent () {
      this.$dialog.confirm({
        title: '取消预约',
        message: '确认要取消预约吗？',
        cancelButtonText: '返回'
      }).then(() => {
        // on confirm
        // console.log('confirm')
      }).catch(() => {
        // on cancel
        // console.log('cancel')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-order-detail {
	width:95%;
	margin: 0 auto;
	font-size: 14px;
	.orderOut{
		box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
	  border-radius: 5px;
	  margin: 10px 0;
		padding: 10px;
		border-bottom:1px solid #EAEAEA;
		position: relative;
		.loading {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	  .orderTop{
	  	display:flex;
	  	padding-bottom:5px;
	  	.time{flex:1;line-height:25px;}
			.state{
				background:#8ea1f6;
				color:#fff;
				border-radius:10px;
				padding:0 3px;
				font-size:1em;
				border: none;
				&.no{background:#c4c4c4;}
				&.finish {
					background: @colorWarning;
				}
			}
	  }
	  .orderList{
	  	li{
	  		display:flex;
	  		padding:10px 0;
	  		span{
	  			flex:3;
	  			text-align:right;
	  		}
	  	}
	  }
	}
	.codeImg{
		text-align:center;
		img {
			width: 150px;
		}
	}
	.cancle-box{
		margin-top: 15px;
	}
}
</style>
